<script lang="ts" setup>
  import { reactive } from 'vue';
  import { CheckOutlined, CloseOutlined } from '@ant-design/icons-vue';
  import Switch from '@sscd/switch';
  const state = reactive({
    checked1: true,
    checked2: false,
    checked3: false,
  });
</script>

<template>
  <div class="demo">
    <div class="demo-title">文字和图标</div>
    <div class="demo-content">
      <Switch v-model:checked="state.checked1" checked-children="开" un-checked-children="关" />
      <br />
      <Switch v-model:checked="state.checked2" checked-children="1" un-checked-children="0" />
      <br />
      <Switch v-model:checked="state.checked3">
        <template #checkedChildren><CheckOutlined /></template>
        <template #unCheckedChildren><CloseOutlined /></template>
      </Switch>
    </div>
  </div>
</template>
